<template>
  <div class="DailyList">
    <div class="DailyList-box">
      <p>今日榜单</p>
    </div>
    <section class="DailyList-content">
      <div class="content-box">
        <div
          v-for="item in DailyList"
          :key="item.bg_img"
          class="DailyList-item"
        >
          <!-- 每个栏目的头 -->
          <div
            class="item-title"
            :style="{ backgroundImage: 'url(' + item.bg_img + ')' }"
          >
            {{ item.model_name }}
          </div>
          <!-- 栏目列表 -->
          <div class="item-list">
            <div v-for="(list, index) in item.data" :key="list.id">
              <!-- 圆d点和标题 -->
              <div
                class="item-list-top"
                @click="GoBookDetails(item.data[index].id)"
              >
                <div></div>
                <p class="van-ellipsis">
                  {{ item.data[index].title }}
                </p>
              </div>
              <p class="item-list-subtitle">{{ item.data[index].subtitle }}</p>
            </div>

            <div class="lookAll-btn">查看全部></div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "DailyList",
  props: ["DailyList"],
  data() {
    return {};
  },
  methods: {
    // 跳转传参
    GoBookDetails(id) {
      this.$router.push({
        path: "/BookDetails",
        query: {
          id,
        },
      });
      // console.log(this.DailyList);
      console.log(id);
    },
  },
};
</script>

<style lang="scss" scoped>
.DailyList {
  padding-bottom: 0.625rem;
  .DailyList-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0;
  }
  .DailyList-content {
    height: 16.25rem;
    overflow-x: auto;
    .content-box {
      width: 48.75rem;
      display: flex;
      justify-content: space-between;
      .DailyList-item {
        width: 15rem;
        height: 16.25rem;
        background-color: white;
        box-shadow: var(--boxsizi);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: auto;
        // 头部
        .item-title {
          width: 100%;
          height: 60px;
          padding: 1.25rem;
          color: white;
          box-sizing: border-box;
          background-size: 100% 12.5rem;
          opacity: 0.9;
        }
        .item-list {
          width: 15rem;
          box-sizing: border-box;
          padding: 0.625rem;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .item-list-top {
            display: flex;
            align-items: center;
            div {
              background-color: #cfbd8c;
              border-radius: 50%;
              padding: 0.2rem;
              box-sizing: border-box;
            }
            p {
              font-size: 0.875rem;
              padding: 0.375rem 0;
              box-sizing: border-box;
              margin-left: 0.375rem;
            }
          }
          .item-list-subtitle {
            font-size: 0.75rem;
            color: var(--fontcolor);
            margin-bottom: 0.625rem;
            margin-left: 0.625rem;
          }
          .lookAll-btn {
            width: 4.375rem;
            font-size: 0.75rem;
            color: #6c7881;
            background-color: #e8ecf2;
            padding: 0.375rem;
            box-sizing: border-box;
          }
        }
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}
</style>